<template>
    <div class="big_box">
        <div class="title">
            <div class="title_left">
                订单编号: &emsp;<span>202302020123</span>
            </div>
            <div class="title_right">占位中</div>
        </div>
        <div class="detail_msg">
            <div>
                <div class="mid_block">
                    <h5>支付信息</h5>
                    <div class="content">
                        <div class="mid_left">
                            <p class="big_p distance">支付方式:&emsp;</p>
                            <p class="big_p distance">订单总额:&emsp;</p>
                            <p class="big_p distance">支付金额:&emsp;</p>
                            <p class="big_p distance">支付时间:&emsp;</p>
                        </div>
                        <div class="mid_right">
                            <div class="big_span distance">微信支付</div>
                            <div class="big_span distance">32.88元</div>
                            <div class="big_span distance">32.88元</div>
                            <div class="big_span distance">2023-01-23 09:30:02</div>
                        </div>
                    </div>
                </div>
                <div class="mid_block">
                    <h5 class="pianyi">终端信息</h5>
                    <div class="content w">
                        <div class="mid_left">
                            <p class="big_p distance">充电站名称:&emsp;</p>
                            <p class="big_p distance">停车位编号:&emsp;</p>
                            <p class="big_p distance">车位位置:&emsp;</p>
                        </div>
                        <div class="mid_right">
                            <div class="big_span distance">丰台站</div>
                            <div class="big_span distance">2023020212312315621</div>
                            <div class="big_span distance">B1-C区32</div>
                        </div>
                    </div>
                </div>
                <div class="mid_block">
                    <h5 class="pianyi2">用户信息</h5>
                    <div class="content no_border">
                        <div class="mid_left">
                            <p class="big_p distance">用户ID:&emsp;</p>
                            <p class="big_p distance">手机号:&emsp;</p>
                            <p class="big_p distance">车牌号:&emsp;</p>
                        </div>
                        <div class="mid_right">
                            <div class="big_span distance">20230202123</div>
                            <div class="big_span distance">20230202123</div>
                            <div class="big_span distance">豫AD888888</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail_footer">
            <h5>充电信息</h5>
            <el-row>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple">
                        入库时间
                    </div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple-light">2023-01-23 09:30:02</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple">开始时间</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple-light">2023-01-23 09:30:02</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple">结束时间</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple-light">2023-01-23 09:30:02</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple">占位时长</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple-light">————————</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple">收费时长</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple-light">————————</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple">实付金额</div>
                </el-col>
                <el-col :span="4">
                    <div style="line-height:34px;" class="grid-content bg-purple-light">————————</div>
                </el-col>
            </el-row>
        </div>

        <div class="detail_footer">
            <h5>退款进度</h5>
            <el-row>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple border">订单金额</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple border">退款金额</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple border">实际退款</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple border">状态</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple border">申请时间</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple border">完成时间</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple border">操作人</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple border">备注</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple-light border border_top">30.00元</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple-light border border_top">30.00元</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple-light border border_top">30.00元</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple-light border border_top">已退款</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple-light border border_top">2023-01-23 09:30:02</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple-light border border_top">2023-01-23 09:30:02</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple-light border border_top">管理员</div>
                </el-col>
                <el-col :span="3">
                    <div style="line-height:34px;" class="grid-content bg-purple-light border border_top"></div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dashed:true
            }
        },
        created() {
            this.resizeHandler()
        },
        methods: {
            resizeHandler() {
              if (window.innerWidth <= 768) {
                this.dashed=true
            } else {
                  this.dashed=false
              }
              window.onresize = function () {
                if (window.innerWidth <= 768) {
                    this.dashed=true
                } else {
                  // console.log('没用?', main.isCollapse);
                  this.dashed=false
                }
              }
          },
        },
    }
</script>

<style lang="less" scoped>
*{
    box-sizing: border-box;
}
.big_box{
    background: #fbfcfe;
}
.big_box>div{
    width: 100%;
    background: white;
    margin-bottom: 31.99px;
}
.title{
    height: 62.02px;
}
.title>div{
    height: 62.02px;
    line-height: 62.02px;
}
.title_left{
    float: left;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
.title_left>span{
    color: #000000;
}
.title_right{
    float: right;
    font-size: 16.03px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
}
.imaging{
    height: 178.01px;
}
.detail_footer{
    overflow: hidden;
    height: 170.03px;
}
.detail_footer h5{
    margin-top: 24.01px;
    text-align: left;
}
.imaging{
    overflow: hidden;
}
.imaging_main{
    position: relative;
    width: 57%;
    height: 114.03px;
    margin: 34.02px auto;
    display: flex;
    justify-content: space-between;
}

.dash{
    position: absolute;
    right: -85%;
    top: 30.03px;
    width: 132.02px;
    height: 0px;
    border-bottom: .98px dashed #262D51;
}

h5{
    margin-bottom: 24.01px;
    font-size: 16.03px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
}
.mid_block h5{
    margin-top: 24.01px;
    margin-left: 23.03px;
}
.imgs{
    width: 100%;
    height: 59.99px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tupian{
    position: relative;
}
.tupian img{
    width: 59.99px;
    height: 59.99px;
}
.img_title{
    margin-top: 16.03px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
}
.time{
    margin-top: 10.01px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #949BBE;
}

.detail_msg{
    height: 273px;
}
.detail_msg>div{
    width: 60%;
    height: 273px;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
}
.detail_msg>div>div{
    flex: 1;
    text-align: left;
}
.content{
    margin-top: 13.02px;
    height: 196px;
    width: 80%;
    border-right: .98px dashed #949BBE;
}
.no_border{
    border-right: none;
}
.big_p{
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 14px;
}
.big_span{
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
}
.small_p{
    font-size: 11.97px;
    color: #999999;
}
.small_span{
    color: #000000;
}
.mid_left{
    width: 98.98px;
    float: left;
    text-align: right;
}
.mid_right{
    float: left;
}
.distance{
    margin-bottom: 16.03px;
}
.top_distance{
    margin-top: 6.02px;
}
.w{
    width:90%;
}
.mid_block>.pianyi{
    margin-left: 9.03px;
}
.mid_block>.pianyi2{
    margin-left: 39.97px;
}

.el-row {
    border: .98px solid #E7E9F0;
    border-radius: 3.99px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .bg-purple {
    background: #F0F1F6;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .bg-purple-light {
    background: #ffffff;
    color: #999999;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
  }
  .grid-content {
    min-height: 35.98px;
  }
  .el-textarea{
    background:#000000;
    :deep(.el-textarea__inner){
        background:#000000;
    }
}
.border{
    border: .98px solid #E7E9F0;
}
.border_top{
    border-top: none;
}
</style>